<template>
  <div class="selfTable">
    <el-table
      ref="multipleTable"
      :row-style="{height: '20px'}"
      :cell-style="{padding: '5px 0'}"
      :data="tableData"
      :border="$attrs.border !== false"
      size="mini"
      fit
      :stripe="$attrs.stripe === undefined ? true : $attrs.stripe"
      highlight-current-row
      v-bind="$attrs"
      style="width: 100%; "
      v-on="$listeners"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="index"
        :reserve-selection="true"
        type="selection"
        width="50"
        :selectable="func"
      />
      <el-table-column
        v-if="indexes"
        label="序号"
        type="index"
        width="50"
        align="center"
      />
      <el-table-column
        v-for="item in columns"
        :key="item.key"
        :prop="item.key"
        :align="item.align || 'center'"
        :min-width="item.width || 100"
        :label="item.label"
        :fixed="item.fixed"
        v-bind="item.attrs"
      >
        <template
          v-if="item.header && item.slot"
          slot="header"
        >
          <slot
            :name="`${item.key}Header`"
            :header="true"
          />
        </template>
        <template
          slot-scope="scope"
        >
          <template v-if="item.slot">
            <slot
              :name="item.key"
              :row="scope.row"
              :index="scope.$index"
            />
          </template>
          <template v-else>
            {{ scope.row[item.key] | DataIsNull }}
          </template>
        </template>
      </el-table-column>
      <div
        v-if="empty"
        slot="empty"
      >
        <p class="emptyText">
          {{ noDataText }}
        </p>
      </div>
    </el-table>
    <Pagination
      :v-show="showPage ? page.total>0 :false"
      :total="page.total"
      :page.sync="page.page"
      :page-sizes="pageSize"
      :limit.sync="page.limit"
      @pagination="handlePageSizeChange"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  props: {
    page: {
      type: Object,
      default: () => {}
    },
    noDataText: {
      type: String,
      default: '暂无数据'
    },
    columns: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array,
      default: () => []
    },
    index: {
      type: Boolean,
      default: false
    },
    indexes: {
      type: Boolean,
      default: false
    },
    func: {
      type: Function,
      default: () => true
    },
    empty: {
      type: Boolean,
      default: false
    },
    showPage: {
      type: Boolean,
      default: true
    },
    pageSize: {
      type: Array,
      default: () => [10, 20, 30, 40, 50]
    }
  },
  data() {
    return {
      multipleSelection: []
    }
  },
  methods: {
    // 勾选中的 row
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 切换
    toggleRowSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    // 分页
    handlePageSizeChange(pageObj) {
      this.$emit('onPageSize', pageObj.page, pageObj.limit)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
